<template>
	<view class="search-input">
		<tpf-search-input ref="tpfSearchInput" :leftIcon="leftIcon || searchInput.leftIcon" :rightIcon="rightIcon || searchInput.rightIcon" :searchInputStyle="searchInput.searchInputStyle" :inputStyle="searchInput.inputStyle" :placeholder="placeholder || searchInput.placeholder" @rightTap="searchInputRightIconTap" :placeholderStyle="placeholderStyle || searchInput.placeholderStyle" @leftTap="searchInputLeftIconTap" @input="input" :searchInputValue="'searchInputValue'"></tpf-search-input>
	</view>
</template>

<script>
	import config from './tpl-search-input.js';
	
	export default {
		mixins: [config],
		props: {
			searchInputValue:{
				type: String,
				defalut: ''
			},
			leftIcon: {
				type: Object,
				// default: function () {
				// 	return {
				// 		fontFamily: '',
				// 		text: '',
				// 		iconSize: '',
				// 		iconColor: ''
				// 	}
				// }
			},
			rightIcon: {
				type: Object,
				// default: function () {
				// 	return {
				// 		fontFamily: '',
				// 		text: '',
				// 		iconSize: '',
				// 		iconColor: ''
				// 	}
				// }
			},
			placeholder: {
				type: String,
			},
			placeholderStyle: {
				type: String,
			}
		},
		methods: {
			searchInputRightIconTap(e) {
				console.log('点击搜索框右侧按钮');
				this.$emit("searchInputRightIconTap",e);
			},
			searchInputLeftIconTap(e) {
				console.log('点击搜索框左侧侧按钮');
			},
			input(e) {
				this.$emit('input', e);
			},
			setSearchInputValue(value){
				this.$refs.tpfSearchInput.searchInputValue=value;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.search-input {
	}
</style>